<template>
  <div class="order-detail">
    <div class="order-content">
      <div class="order_info">
        <p class="title">订单信息</p>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="订单编号" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.orderCode }}</el-descriptions-item>
          <el-descriptions-item label="订单状态" label-class-name="my-label" span="2" class-name="status">
            <template #default>
              <div class="orderStatus">
                <div v-if="orderDetail.data.orderStatus === 'PAYREJECT'">
                  <el-tooltip popper-class="tooltip" effect="light" placement="bottom">
                    <span class="payReject">支付审核驳回</span>
                    <template #content>
                      <h4>驳回备注:</h4>
                      <div class="reason">{{ orderDetail.data.payRefuseRemark }}</div>
                    </template>
                  </el-tooltip>
                </div>
                <span v-else>{{ $formater.formaterOrderStatus(orderDetail.data.orderStatus) }}</span>
              </div>
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="下单时间" label-class-name="my-label" class-name="my-content">{{ $formater.formatTime(orderDetail.data.createTime) }}</el-descriptions-item>

          <el-descriptions-item v-if="orderDetail.data.orderStatus !== 'UNPAID'" label="支付凭证" label-class-name="my-label" class-name="my-content">
            <span v-if="orderDetail.data.settleType === 'MONTHLY'">月结</span>
            <div v-else class="proof">
              <img class="proof_img" :src="orderDetail.data.payProof" />
              <Link label="查看" class="btn" @click="onShowImgClick(orderDetail.data.payProof)" :underline="false" />
            </div>
          </el-descriptions-item>

          <el-descriptions-item label="采购商" label-class-name="my-label" class-name="my-content"
            >{{ orderDetail.data.customerName }}
            <Button class="btn" label="查看资质" type="primary" @click="onShowQualicationClick" />
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="delivery_info">
        <p class="title">配送信息</p>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="收货人" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.shippingPerson }}</el-descriptions-item>
          <el-descriptions-item label="收获地址" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.shippingDetail }}</el-descriptions-item>
          <el-descriptions-item label="收货电话" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.shippingMobile }}</el-descriptions-item>
          <el-descriptions-item label="备注信息" label-class-name="my-label" class-name="my-content">{{ orderDetail.data.buyerRemark }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="goods">
        <div class="top">
          <p class="title">商品信息</p>
          <Button label="导出订单" class="export_button" type="primary" @click="onToExportClick" />
        </div>
        <Table type="goods" :list="orderDetail.orderGoodsList" :orderPrice="orderDetail.data.orderReceivePrice" />
      </div>

      <div class="goods" v-if="orderDetail.backOrderGoodsList?.length > 0">
        <div class="top">
          <p class="title">售后信息</p>
          <Button label="售后详情" class="export_button" type="primary" @click="onBackDetailClick" />
        </div>
        <Table :list="orderDetail.backOrderGoodsList" :afterSaleFlag="orderDetail.afterSaleFlag" type="afterSale" :orderPrice="orderDetail.data.orderPrice" />
      </div>
    </div>

    <div class="audit_button" v-if="ori === 'audit'">
      <Button label="驳回" @click="onRejectClick" />
      <Button type="primary" label="通过" @click="onPassClick" />
    </div>
  </div>

  <el-image-viewer ref="previewViewer" v-if="showImageViewer" @close="closeImgView" :url-list="srcList" />

  <Qualication v-model:visible="qualiVisible" :customerId="orderDetail.customerId" />
  <Reject v-model:visible="rejectVisible" @change="onRejectChange" />
</template>
<script setup>
import { reactive, onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import api from '@/api'
import consts from '@/consts'
import formater from '@/formater'
import Reject from '@/components/reject/index.vue'
import Qualication from '@/components/qualication/index.vue'
import Button from '@/components/button/button.vue'
import Link from '@/components/button/link.vue'
import Table from '@/components/table/goods.vue'

const route = useRoute()
const router = useRouter()
const ori = route.meta.ori || ''
const orderId = route.params.id

const orderDetail = reactive({
  orderGoodsList: [],
  backOrderGoodsList: [],
  data: {},
  customerId: ''
})
const loading = ref(false)
const qualiVisible = ref(false)
const rejectVisible = ref(false)

const srcList = ref([])
const previewViewer = ref()
const showImageViewer = ref(false)

const audit = async (operateType, orderIds, remark) => {
  let { err } = await api.post(`/medinstrument/third/order/auditOrderPay?remark=${remark}&orderIds=${orderIds}&operateType=${operateType}`)
  if (err) {
    ElMessage.error(err)
  } else {
    operateType === 'REJECT' ? ElMessage.success('订单已驳回') : ElMessage.success('订单已通过')
    router.push('/payment')
    loadData()
  }
}

const loadData = async () => {
  loading.value = true
  let { data, err } = await api.get(`/medinstrument/third/order/getOrderdetails?orderId=${orderId}`)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    orderDetail.orderGoodsList = data.data.orderGoodsList
    orderDetail.backOrderGoodsList = data.data.backOrderGoodsList
    orderDetail.afterSaleFlag = data.data.afterSaleFlag
    orderDetail.data = data.data
  }
}

const onToExportClick = () => {
  api.download(`/medinstrument/third/exportExcel/exportOrderDetails?orderId=${orderId}`)
}

const onShowQualicationClick = () => {
  qualiVisible.value = true
  orderDetail.customerId = orderDetail.data.customerId
}

const onRejectClick = () => {
  rejectVisible.value = true
}

const onRejectChange = (val) => {
  audit('REJECT', orderId, val)
}

const onPassClick = () => {
  ElMessageBox.confirm('是否确认通过审核', '系统', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    showClose: false,
    closeOnClickModal: false,
    closeOnPressEscape: false
  })
    .then(() => {
      audit('PASS', orderId, '')
    })
    .catch(() => {})
}

const onBackDetailClick = () => {
  let { href } = router.resolve({
    path: `/order/afterSale/detail/${orderId}`
  })
  window.open(href, '_blank')
}

const onShowImgClick = (url) => {
  srcList.value = [url]
  showImageViewer.value = true
}

const closeImgView = () => {
  showImageViewer.value = false
}

onMounted(() => {
  loadData()
})
</script>
<style scoped lang="scss">
.order-detail {
  .order-content {
    margin: 0 15px 10px 10px;

    .order_info,
    .delivery_info,
    .goods {
      padding: 20px 10px 20px 20px;
      margin-top: 10px;
      background-color: #fff;

      .title {
        font-size: 16px;
        font-weight: 500;
        line-height: 16px;
      }
    }

    .top {
      display: flex;
      align-items: center;

      .export_button {
        margin-left: 20px;
      }
    }

    .order_info {
      .btn {
        margin-left: 20px;
      }

      .orderStatus {
        display: flex;
        align-items: center;

        .payReject {
          position: relative;
        }

        .payReject::after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          bottom: -6px;
          width: 100%;
          height: 1px;
          background-color: #e6a23c;
        }
      }

      .proof {
        display: flex;
      }
    }
  }
}
</style>
<style>
.tooltip {
  line-height: 18px;
  box-shadow: 1px 1px 10px 3px #d3d3d6;
  font-size: 14px !important;
  color: var(--color-primary-text) !important;
}
</style>
